import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch } from 'react-router-dom';
import { Avatar , Icon , Tools } from 'weaver-mobile';
import { ListPage , RouteLayout} from 'weaver-mobile-page';
import { toJS} from 'mobx';
import ReceiptForm from './receiptForm'
const Normal = ListPage.Normal; // Normal 为无路由的普通组件
const getLabel = Tools.getLabel;

@inject('viewMeetingStore')
@withRouter
@observer
class OtherMemberData extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
      };
    }
    componentDidMount() {
      const { memberType } = this.props;
      const { getOtherMemberDetail, meetingId } = this.props.viewMeetingStore;
      let params = { meetingid: meetingId,ismobile:'1',memberType:memberType }
      getOtherMemberDetail(params);
    }

    componentWillReceiveProps (nextProps) {
    
      const prePath = this.props.location.pathname;
      const curPath = nextProps.location.pathname;
      
      if (curPath && curPath !== prePath) {
        if(curPath.indexOf('receiptForm') < 0 ){
          const { memberType } = this.props;
          const { getOtherMemberDetail, meetingId } = this.props.viewMeetingStore;
          let params = { meetingid: meetingId,ismobile:'1',memberType:memberType }
          getOtherMemberDetail(params);
        }
      }
    }

    openMemberReceipt = (recordId,canEdit)=>{
      const recordId_Arr = recordId.split("_");
      const { setState } = this.props.viewMeetingStore;
      const pathname = this.props.location.pathname;
      setState({
        recordId:recordId_Arr[0],
        isPreview:'1',
        canEdit: canEdit,
        prePathName: `${pathname}/receiptForm`,
      })
      
      this.props.history.push(`${pathname}/receiptForm`);
    }

    render() {
      const { memberType , viewMeetingStore} = this.props;
      const { otherMemberList,otherCrmList } = viewMeetingStore;
      let mobileshowtemplate = {};
      if(memberType === '1'){
        mobileshowtemplate = {
          default: [
            {
              key: 'col1',
              style: { flex: 'none' },
              render(a) {
                return <Avatar userId={toJS(a).userId || ''} name={toJS(a).hrmName} url={toJS(a).url} />;
              },
            },
            {
              key: 'col2',
              configs: [
                { key: 'col2-row1', configs: [{ key: 'hrmName' }],style:{color:'#333'} },
                { key: 'col2-row2', configs: [{ key: 'desc' }] },
              ],
            },
            {
              key: 'col3',
              style: { flex: 'none' },
              configs: [
                { key: 'col3-row1', configs: [{ key: '' }],style:{color:'#333'} },
                { key: 'col3-row2', render:(a)=>{return <span style={{float:'right',fontSize:'14px'}} onClick={()=>this.openMemberReceipt(a.id,a.canEdit)}>{getLabel(389531, '查看回执')}</span>;} },
              ],
            },
            {
              key: 'col4',
              style: { flex: 'none' },
              configs: [
                { key: 'col4-row1', configs: [{ key: '' }] },
                { key: 'col4-row2', render:(a)=>{return <span style={{float:'right',marginLeft:'-5px'}} ><Icon type='right' style={{verticalAlign:'middle'}}/></span>;} },
              ],
            },
          ],
        };
      }else if(memberType === '2'){
        mobileshowtemplate = {
          default: [
            {
              key: 'col1',
              configs: [
                { key: 'row1', configs: [{ key: 'crmName' }],style:{color:'#333'} },
                { key: 'row2', configs: [{ key: 'desc' }] },
              ],
            },
            {
              key: 'col2',
              style: { flex: 'none' },
              configs: [
                { key: 'row1', configs: [{ key: '' }],style:{color:'#333'} },
                { key: 'row2', render:(a)=>{return <span style={{float:'right',fontSize:'14px'}} onClick={()=>this.openMemberReceipt(a.id,a.canEdit)}>{getLabel(389531, '查看回执')} ></span>;} },
              ],
            },
          ],
        };
      }
      const otherMemberHeight = this.getHeight();
      return (
        <div style={{ height: "100%" }}>
          <div style={{height:otherMemberHeight,overflowY:'auto'}} className={'otherMember-detail-contain'}>
            <Normal
                template={mobileshowtemplate}
                store={memberType==='1' ? otherMemberList : otherCrmList}
            />
            <Switch>
              <Route
                key="otherReceiptForm"
                path="/calendar/detail/member/:type/receiptForm"
                render={()=>(
                  <RouteLayout>
                  <div key="receiptFormDiv" className="wm-route-layout wm-demo-route-layout-page">
                    <ReceiptForm />
                  </div>
                  </RouteLayout>
                )}
              />
            </Switch>
          </div>
        </div>
      )
    }

    getHeight = () => {
      return window.innerHeight;
    }
}

export default OtherMemberData;